<template>
	<view class="order">
		<view class="order-title">
			<text>我的主页</text>
		</view>
		<view class="order-moudle">
			<view class="moudle-item" @click="toOrderList">

				<image class="item-img" src="../../static/icons/film.png" mode=""></image>
				<text>电影票</text>
			</view>
			<view class="moudle-item" @click="toGoods">
				<image class="item-img" src="../../static/icons/goods_avtive2.png" mode=""></image>
				<text>卖品</text>
			</view>
			<view class="moudle-item" @click="toCardPage">
				<image class="item-img" src="../../static/icons/card.png" mode=""></image>
				<text>会员卡</text>
			</view>
			<view class="moudle-item" @click="toCouponPage">
				<image class="item-img" src="../../static/icons/ticket.png" mode=""></image>
				<text>优惠券</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			toOrderList() {
				uni.navigateTo({
					url: '../../pages/orderList/orderList'
				})

			},
			toCouponPage() {

				uni.navigateTo({
					url: "../../pages/couponList/couponList"
				})
			},
			toCardPage() {

				uni.navigateTo({
					url: "../../pages/cardList/cardList"
				})
			},
			toGoods() {
				uni.navigateTo({
					url: "../../pages/goodsOrderList/goodsOrderList"
				})
			}
		}
	}
</script>

<style lang='scss' scoped>
	.order {
		width: 90vw;
		margin: 20rpx auto;
		background-color: #fff;
		padding: 20rpx;
		border-radius: 10rpx;
		font-size: 28rpx;
		box-shadow: 8rpx 8rpx 8rpx #e0e0eb;

		.order-title {
			border-bottom: 1px solid #f0f0f5;
			padding-bottom: 20rpx;
		}

		.order-moudle {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 25rpx;

			.moudle-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				.item-img {
					width: 100rpx;
					height: 100rpx;


				}
			}
		}
	}
</style>
